<template>
  <el-drawer v-model="visible" direction="ltr" size="1000" title="挂号收费确认">
    <el-descriptions :column="3" border>
      <el-descriptions-item label="出诊日期" :label-width="labelWidth">
        {{ labelInfo.clinicDate }}
      </el-descriptions-item>
      <el-descriptions-item label="号别" :span="2" :label-width="labelWidth">
        {{ labelInfo.clinicLabel }}
      </el-descriptions-item>
      <el-descriptions-item label="医生" :label-width="labelWidth">{{ labelInfo.doctorName }} </el-descriptions-item>
      <el-descriptions-item label="科室" :label-width="labelWidth"> {{ labelInfo.deptName }}</el-descriptions-item>
      <el-descriptions-item label="号类" :label-width="labelWidth"> {{ labelInfo.clinicType }}</el-descriptions-item>
      <el-descriptions-item label="挂号金额" :label-width="labelWidth"> {{ labelInfo.money }}</el-descriptions-item>
    </el-descriptions>
    <el-card v-show="labelInfo.pool"> 号源池 </el-card>
    <el-divider />
    <div>患者信息</div>
    <el-form ref="ruleFormRef" :model="confirmPayPatientInfo" status-icon :rules="rules" label-width="80">
      <el-row>
        <el-col :span="8">
          <el-form-item label="院内ID" prop="patientId">
            <div class="flex flex-row">
              <el-input v-model="confirmPayPatientInfo.patientId" /> <el-button>查询</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费别" prop="chargeType">
            <el-input v-model="confirmPayPatientInfo.chargeType" style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="患者姓名" prop="name">
            <el-input v-model="confirmPayPatientInfo.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="idNo">
            <el-input v-model="confirmPayPatientInfo.idNo" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="confirmPayPatientInfo.sex">
              <el-radio value="男">男</el-radio>
              <el-radio value="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="出生年月" prop="birthday">
            <el-date-picker v-model="confirmPayPatientInfo.birthday" format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" prop="tel">
            <el-input v-model.number="confirmPayPatientInfo.tel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="住址" prop="addr">
            <el-input v-model="confirmPayPatientInfo.addr" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-descriptions border title="支付方式" label-width="80">
      <el-descriptions-item label="医保支付"></el-descriptions-item>
      <el-descriptions-item label="医保账户"></el-descriptions-item>
      <el-descriptions-item label="现金"></el-descriptions-item>
      <el-descriptions-item label="聚合支付"></el-descriptions-item>
      <el-descriptions-item label="银行卡"></el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="flex flex-row gap-2 flex-justify-between">
        <div class="flex flex-row gap-2">
          <div><el-button @click="previewConfirmPay">预结算</el-button></div>
          <div><el-button @click="confirmPay">结算确认</el-button></div>
        </div>

        <el-button type="danger" @click="rollbackPay">取消结算</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import type { RegisterConfirmPayReq, RegisterScheduleDayItemRes } from '@/api/register'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'

const labelInfo = ref<RegisterScheduleDayItemRes>({
  limitNum: 0,
  remainNum: 0,
  doctorName: '',
  deptName: '',
  clinicType: '',
  clinicDate: new Date(),
  timeDesc: '',
  workId: '',
  registerLimit: 0,
  registerNum: 0,
  appointLimit: 0,
  appointNum: 0,
  clinicLabel: '',
  pool: false,
  money: 0,
})

const confirmPayPatientInfo = ref<RegisterConfirmPayReq>({
  patientId: '',
  name: '',
  chargeType: '自费',
  sex: '男',
  birthday: new Date(),
})

const labelWidth = 80
const visible = ref(false)

const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules<RegisterConfirmPayReq>>({
  patientId: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          return callback(new Error('患者院内ID不能为空'))
        }
      },
      trigger: 'blur',
    },
  ],
  name: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          return callback(new Error('患者姓名不能为空'))
        }
      },
      trigger: 'blur',
    },
  ],
  idNo: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          return callback(new Error('患者身份证号不能为空'))
        }
      },
      trigger: 'blur',
    },
  ],
  sex: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          return callback(new Error('患者性别不能为空'))
        }
      },
      trigger: 'blur',
    },
  ],
  birthday: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          return callback(new Error('出生日期不能为空'))
        }
      },
      trigger: 'blur',
    },
  ],
  chargeType: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          return callback(new Error('费别不能为空'))
        }
      },
      trigger: 'blur',
    },
  ],
})

/**预结算 */
function previewConfirmPay() {
  if (!ruleFormRef.value) {
    return
  }
  ruleFormRef.value.validate(valid => {
    ElMessage.success('开始结算')
  })
}

/**取消结算 */
function rollbackPay() {
  visible.value = false
}

/**显示结算界面 */
function display(data: RegisterScheduleDayItemRes) {
  visible.value = true
  labelInfo.value = data
}

/**确认支付 */
function confirmPay() {
  visible.value = false
  ElMessage.success('支付成功')
}

defineExpose({
  display,
})
</script>

<style lang="scss"></style>
